<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <view class="item" v-for="item in dataList" :key="item.id">
      <view class="item-title">{{ item.createTime }}</view>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import ZPaging from "@/subPackageOne/components/z-paging/z-paging.vue"

const paging = ref<ZPagingInstance>()
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo: number, pageSize: number) => {
  console.log('触发了queryList分页请求，页码：' + pageNo + '，每页数据量：' + pageSize)
  // 此处请求仅为演示，请替换为自己项目中的请求
  request.get('/userList', {pageNo, pageSize}).then(res => {
    paging.value?.complete([]);
  }).catch(res => {
    uni.$emit('z-paging-error-emit')
  })
}
</script>
<style lang="scss" scoped>

</style>
